import LineChart from '@/components/LineChart';
import * as c from '@/services/consts';
import * as api from '@/services/vpnServer';
import ProCard from '@ant-design/pro-card';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Card, Col, Row, Tabs, Tag } from 'antd';
import TabPane from 'antd/es/tabs/TabPane';
import React, { useEffect, useRef, useState } from 'react';

type VpnServerFormProps = {
  visible: boolean;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel, } = props;

  if (!visible) {
    return null;
  }

  const formRef = useRef<ProFormInstance>();

  const [myLoading, setMyLoading] = useState<boolean | undefined>(true);
  const [data, setData] = useState<API.VpnServerBlockedIpStat[] | undefined>(
    undefined,
  );

  const loadDataDo = async () => {
    setMyLoading(true);
    const result = await api.blockedIpStatList(
      {
      },
      undefined,
      undefined,
    );

    if (result && result.success) {
      setData(result.data);
    }
    setMyLoading(false);
  };

  useEffect(() => {
    loadDataDo();
  }, []);

  return (
    <DrawerForm<API.VpnServerMonitorModel>
      open={visible}
      title={
        <span>
          被墙IP统计
        </span>
      }
      formRef={formRef}
      autoFocusFirstInput
      width={1200}
      loading={myLoading}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        closable: false,
        onClose: onCancel,
        // maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={24}>          
        <Tabs type="card">
          {data?.map((dy)=>{
          return <TabPane tab={<>{dy.title} [合:{dy.count}]</>}  key={dy.title} style={{border:1,borderStyle:'solid',borderColor:'#eee',marginTop:-18, padding:20}}>
            {dy.data.map((dm)=>{
              return <Card size="small" headStyle={{backgroundColor:'#efefef'}} title={<>{dm.title} [合:{dm.count}]</>}>
            <div>
            <LineChart
              data={dm.data ?? []}
              xfield="title"
              yfield="count"
              seriesField=""
              height={150}
              displayLabel={{}}
              displayPoint={true}
              backColor={undefined}
            />
            </div>

            </Card>
            })}

          </TabPane>
          })}

        </Tabs>



          <ProCard>
          </ProCard>
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
